<template>
  <div id="contentBody" class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">参加工程项目建设情况</h3>
        <div class="box-tools pull-right">
          <el-button type="success" class="btn btn-success" v-if='isEditable' @click="()=>addVisible = true">
            <i class='fa fa-plus-square-o'>添加参加工程项目建设情况</i>
          </el-button>
        </div>
      </div>
      <div class="box-body">
        <section class="content" id="departEmployees">
          <div class="row">
            <el-table stripe :empty-text="emptyText" :highlight-current-row='true' :data="projects" border style="width: 100%">
              <el-table-column type='index' label="序号" :width='80'></el-table-column>
              <el-table-column v-for='col in this.columns' :fixed='col.fixed?col.fixed:false' :key="col.prop" :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter'></el-table-column>
              <el-table-column label="操作" width="320">
                <template scope="scope">
                              <el-button type="success" @click="view(scope.row)">
                                <i class="fa fa-eye">查看</i>
                              </el-button>
                              <el-button type="primary" v-if="isEditable" @click="editRow(scope.row)">
                                <i class="fa fa-edit">编辑</i>
                              </el-button>
                              <el-button type="warning" v-if="isEditable" @click="deleterow(index)">
                                <i class="fa fa-trash">删除</i>
                              </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </section>
      </div>

      <el-dialog title="新增参加工程项目建设情况" :visible.sync="addVisible" :modal="false" size="small">
        <ProjectForm v-if='addVisible' :editable='true' ref='addView'></ProjectForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false">关 闭</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="查看参加工程项目建设情况" :visible.sync="viewVisible" :modal="false" size="small">
        <ProjectForm v-if='viewVisible' :project='editproject' :editable='false' ref='ViewForm'></ProjectForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="viewVisible = false">关 闭</el-button>
        </span>
      </el-dialog>

      <el-dialog title="编辑参加工程项目建设情况" :visible.sync="editVisible" :modal="false" size="small">
        <ProjectForm v-if='editVisible' :project='editproject' :editable='true' ref='editView'></ProjectForm>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">关 闭</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import ProjectForm from './ProjectForm'
  import Utils from "../../../common/utils"
  let util = new Utils()
  export default {
    name: 'Project',
    props: ['projects', 'editable'],
    data: function() {
      return {
        isEditable: true,
        emptyText: '空',
        isEditable: true,
        viewVisible: false,
        addVisible: false,
        editVisible: false,
        editproject: {
          level: 1,
          name: '',
          depart: '',
          jointype: 1,
          starttime: '',
          endtime: '',
          reward: '',
          comment: ''
        },
        pojectlevels: [],
        jointypes: [],
        columns: [{
            prop: "name",
            label: "项目名称",
            sortable: true,
            width: "120",
            formatter: util.stringFormater
          },
          {
            prop: "level",
            label: "项目级别",
            sortable: true,
            width: "180",
            formatter: this.getprojectlevelname
          },
          {
            prop: "depart",
            label: "项目单位",
            width: "100",
            sortable: true,
            formatter: util.stringFormater
          },
          {
            prop: "jointype",
            label: "参与形式",
            width: "140",
            sortable: true,
            formatter: this.getjointypename
          },
          {
            prop: "starttime",
            label: "项目开始时间",
            width: "100",
            sortable: true,
            formatter: util.stringFormater
          },
          {
            prop: "endtime",
            label: "项目结束时间",
            width: "100",
            sortable: true,
            formatter: util.stringFormater
          },
          {
            prop: "reward",
            label: "获奖情况",
            width: "150",
            sortable: true,
            formatter: util.stringFormater
          }
        ]
      }
    },
    components: {
      ProjectForm
    },
    created: function() {
      if (this.editable != null) {
        this.isEditable = this.editable
      }
      this.pojectlevels = this.$store.state.sysconfigs.racelevels
      this.jointypes = this.$store.state.sysconfigs.jointypes
    },
    methods: {
      getname(cates, id) {
        for (var index in cates) {
          if (cates[index].id == id) {
            return cates[index].name;
          }
        }
        return ''
      },
      getprojectlevelname(row) {
        return this.getname(this.pojectlevels, row.level)
      },
      getjointypename(row) {
        return this.getname(this.jointypes, row.jointype)
      },
      deleterow(index) {
        var that = this
        util.deleteConf(that, () => {
          that.projects.splice(index, 1)
        })
      },
      view(row) {
        this.editproject = row
        this.viewVisible = true
      },
      editRow(row) {
        this.editproject = row
        this.editVisible = true
      },
      add(e) {
        var newEdu = this.$refs.addView.getData()
        this.projects.push(newEdu)
        this.addVisible = false
      },
      update(e) {
        var editEdu = this.$refs.editView.getData()
        this.editproject = editEdu
        this.editVisible = false
      },
      getData() {
        return this.projects
      }
    }
  }
</script>

<style scoped>
  #contentBody {
    min-height: 400px;
  }
</style>